border 的基本屬性（寬度、樣式、顏色）border-radius）box-shadow 建立立體感效果<body>
<h1>CSS 邊框與陰影示範</h1>
<div class="box solid">實線邊框</div>
<div class="box dashed">虛線邊框</div>
<div class="box rounded">圓角邊框</div>
<div class="box shadow">帶有陰影的卡片</div>
</body>
body {
font-family: "Microsoft JhengHei", Arial, sans-serif;
background: #f5f5f5;
text-align: center;
padding: 30px;
}
h1 {
margin-bottom: 24px;
color: #333;
}
.box {
width: 200px;
margin: 15px auto;
padding: 20px;
background: white;
}
.solid {
border: 2px solid #3498db;
}
.dashed {
border: 2px dashed #e67e22;
}
.rounded {
border: 2px solid #2ecc71;
border-radius: 15px;
}
.shadow {
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
border 至少要有寬度與樣式border-radius 更簡單rgba() 製造柔和效果border-radius: 50%，做成圓形頭像border-radius 與 box-shadow
box-shadow）今天練習了 CSS 的邊框與陰影，發現這些小小的樣式可以大大改變版面的感覺。最基本的 border 讓元素有清楚的界線，而 border-radius 只要調整數值，就能輕鬆做出圓角或圓形圖片，非常直覺。
我覺得最有趣的是 box-shadow，一開始看起來很複雜，但其實就是 x、y 偏移加上模糊與顏色。透過透明度的調整，可以讓陰影變得很自然，完全不用靠圖片去模擬。
這讓我體會到 CSS 不只是「裝飾」，而是能用簡單的屬性創造出設計感。以後做卡片、按鈕或模態視窗時，這些技巧一定會用上。
iThome鐵人賽
看影片追技術